<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>添加收货地址</title>
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/personal/addaddress.css">
    <script src="../../js/jquery-2.2.3.min.js"></script>
    <script src="../../js/rem.js"></script>
    <script src="../../js/common.js"></script>

    <script src="../detail/layer-v3.1.1/layer/layer.js"></script>
    <script src="../detail/js/vue.min.js"></script>
    <script src="../detail/js/vue-resource.min.js"></script>
    <script src="../../js/mobileSelect.min.js"></script>
    <script src="../../js/city.js"></script>
    <link rel="stylesheet" href="../../js/mobileSelect.css">
</head>
<body style="background-color: #F5F5F5">
<div id="app">
    <div class="head">
        <div class="h-left" id="topS"></div>
        <div class="h-middle">添加收货地址</div>
        <div class="h-right"></div>
    </div>
    <div style="height: .44rem;"></div>
    <div class="container">
        <div class="cont">
            <div class="cont-left">收件人姓名：</div>
            <div class="cont-right">
                <input type="text" class="contInp userName" placeholder="最少两个字">
            </div>
        </div>
        <div class="cont">
            <div class="cont-left">手机号：</div>
            <div class="cont-right">
                <input type="text" class="contInp userPhone" placeholder="输入收件人联系方式">
            </div>
        </div>
        <div class="cont">
            <div class="cont-left">所在地区：</div>
            <div class="cont-right">
                <img src="../../img/icon-right.png" class="icon-right" alt="">
                <p id="area2">请选择地区</p>
                <input type="hidden" name="area_id1" id="area_id1">
                <input type="hidden" name="area_id2" id="area_id2">
                <input type="hidden" name="area_id3" id="area_id3">
            </div>
        </div>
        <div class="cont">
            <div class="cont-left">详细地址：</div>
            <div class="cont-right">
                <input type="text" class="contInp userAddress" placeholder="小区、街道、具体街道、门牌号等">
            </div>
        </div>
    </div>
    <div class="addressBtn baocun" @click="submit">保存</div>
    <div class="zhezhao">
        <div class="zzBox">
            <p class="zz-p1">第一条信息保存后将不可修改</p>
            <div class="zz-div">
                <div class="z-d-b true" @click="sure">确定</div>
                <div class="z-d-b" @click="cancel">取消</div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        $('#topS').click(function () {
            window.history.go(-1);
        })
    })
    var app = new Vue({
        el:'#app',
        data:{

        },
        mounted(){
            var mobileSelect = new MobileSelect({
                trigger: '#area2',
                title: '地区选择',
                wheels: [
                    {data:city}
                ],
                keyMap: {
                    id:'areaId',
                    value: 'name',
                    childs :'sub'
                },
                position:[2],
                callback:function(indexArr, data){
                    console.log(data);
                    for(var i=0,l=data.length;i<l;i++){
                        var areaid=i+1;
                        $('#area_id'+areaid).val(data[i].areaId);
                    }
                    console.log($('#area_id1').val())
                    console.log($('#area_id2').val())
                    console.log($('#area_id3').val())
                }
            });
        },
        methods:{
            sure:function(){
                let userName = $('.userName').val(),
                    userPhone = $('.userPhone').val(),
                    userAddress = $('.userAddress').val();
                if(!userName){
                    layer.msg('请添加收货人姓名');
                }else if(!userPhone){
                    layer.msg('请添加收货人电话');
                }else if(!userAddress){
                    layer.msg('请添加详细地址');
                }else if(!$('#area_id3').val()){
                    layer.msg('请选择省市区');
                }else {
                    let data = {
                        userId:localStorage.getItem('userId'),
                        userName:userName,
                        userPhone:userPhone,
                        userAddress:userAddress,
                        provinceId:$('#area_id1').val(),
                        cityId:$('#area_id2').val(),
                        areaId:$('#area_id3').val()
                    }
                    this.$http.post(SURL + '/api/xlsusersaddress/createAddress',data,{emulateJSON : true}).then(function (res) {
                        console.log(res)
                        $('.zhezhao').hide()
                        if (res.body.status == 1){
                        	window.history.go(-1)
                        }else{
                        	alert(res.body.msg);
                        }
                    })
                }
            },
            cancel:function(){
                $('.zhezhao').hide()
            },
            submit:function () {
                this.$http.post(SURL + '/api/xlsusersaddress/checkIsFirstAddress',{userId:localStorage.getItem('userId')},{emulateJSON : true}).then(function (res) {
					if(res.body.data == "1"){
                        $('.zhezhao').show()
                    }else {
                        let userName = $('.userName').val(),
                            userPhone = $('.userPhone').val(),
                            userAddress = $('.userAddress').val();
                        if(!userName){
                            layer.msg('请添加收货人姓名');
                        }else if(!userPhone){
                            layer.msg('请添加收货人电话');
                        }else if(!userAddress){
                            layer.msg('请添加详细地址');
                        }else if(!$('#area_id3').val()){
                            layer.msg('请选择省市区');
                        }else {
                            let data = {
                                userId:localStorage.getItem('userId'),
                                userName:userName,
                                userPhone:userPhone,
                                userAddress:userAddress,
                                provinceId:$('#area_id1').val(),
                                cityId:$('#area_id2').val(),
                                areaId:$('#area_id3').val()
                            }
                            this.$http.post(SURL + '/api/xlsusersaddress/createAddress',data,{emulateJSON : true}).then(function (res) {
                                console.log(res)
								if (res.body.status == 1){
									window.history.go(-1)
								}else{
									alert(res.body.msg);
								}
                            })
                        }
                    }

                })
                // console.log('userId');
                // console.log('userName');
                // console.log('userPhone');
                // console.log('provinceId');
                // console.log('cityId');
                // console.log('areaId');
                // console.log('userAddress');
                /*let userName = $('.userName').val(),
                    userPhone = $('.userPhone').val(),
                    userAddress = $('.userAddress').val();
                console.log(userName)
                console.log(userPhone)
                console.log(userAddress)
                console.log(localStorage.getItem('userId'))
                if(!userName){
                    layer.msg('请添加收货人姓名');
                }else if(!userPhone){
                    layer.msg('请添加收货人电话');
                }else if(!userAddress){
                    layer.msg('请添加详细地址');
                }else if(!$('#area_id3').val()){
                    layer.msg('请选择省市区');
                }else {
                    let data = {
                        userId:localStorage.getItem('userId'),
                        userName:userName,
                        userPhone:userPhone,
                        userAddress:userAddress,
                        provinceId:$('#area_id1').val(),
                        cityId:$('#area_id2').val(),
                        areaId:$('#area_id3').val()
                    }
                    this.$http.post(SURL + '/jfd/usersAddress/createAddress',data,{emulateJSON : true}).then(function (res) {
                        console.log(res)

                    })
                }*/

            }
        }
    })
</script>
</body>
</html>
